.comp-share {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 13;
    width: 100%;
    color: #333333;
    transition: all .25s;
    transform: translateY(0);

    &.hide {
        transform: translateY(100%);
    }

    .tab-wrap {
        padding: 80rpx 180rpx;
        background-color: #F3F3F3;
        border-radius: 48rpx 48rpx 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: none;

            .icon {
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
                background-color: #fff;
                margin-bottom: 16rpx;
            }

            .ico1 {
                // margin-bottom: 28rpx;
            }

            .text {
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
            }

            .txt1 {
                padding-bottom: 14rpx;
            }
        }
    }

    .cancel {
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        background-color: #fff;
        border-radius: 0;
        width: 100%;
    }
}

.mask {
    position: relative;
    z-index: 12;
}

.poster-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all .25s;

    &.pin {
        transform: translate(-50%, -45%);
    }

    &.ad-poster {
        position: static;
        transform: none;
        margin: 42rpx auto;
        left: 50%;
        top: 0;
        transition: none;

        .tip {
            margin-bottom: 42rpx;
        }
    }

    &.hide {
        z-index: -1;
        transform: translate(750rpx, -50%);
    }

    .canvas {
        width: 100%;
        overflow: hidden;

        &.hide {
            display: none;
        }
    }

    .poster-temp {
        width: 100%;

        &.hide {
            display: none;
        }
    }

    .tip {
        margin-top: 50rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #fff;
        width: 460rpx;
        height: 84rpx;
        background: linear-gradient(90deg, #F1AF86 0%, #E78140 100%);
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &.ai {
            background: linear-gradient(135deg, rgba(68, 255, 248, .3) 0%, rgba(255, 165, 249, .3) 100%);
            border: 2rpx solid rgba(68, 255, 248, 1);
            color: #44FFF8;
        }
    }

    .close {
        width: 40rpx;
        height: 40rpx;
        position: fixed;
        right: 24rpx;
        top: 24rpx;
        z-index: 21;
    }
}

.button {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent;
    line-height: none !important;
    width: auto !important;
}